import React, { ChangeEvent, ReactNode, useEffect, useState } from 'react';
import orgService from '@/api/index';
import { useLocation, useNavigate } from "react-router-dom"
import Empty from '@/components/Empty';
import styles from "./ResultPage.module.scss";
import { Button, Form, Input, message, Pagination } from 'antd';
import { CircleLoading } from "@/components/CircleLoading"
import { m } from 'framer-motion';
import MotionContainer from '@/components/animate/motion-container';
import { varFade } from '@/components/animate/variants/fade';
import type { PaginationProps } from 'antd';
import styled from 'styled-components';

interface PropsType {
  list: any
  total: any,
  onParentChange: any
}


const Inputs = styled.div`
  
  .input {
    border: 2px solid transparent;
    width: 100%;
    height: 3rem;
    padding-left: 0.8em;
    outline: none;
    overflow: hidden;
    background-color: #F3F3F3;
    border-radius: 10px;
    transition: all 0.5s;
    margin-bottom: 10px;
    border: 1px solid #4A9DEC;
}

.input:hover,
.input:focus {
  border: 2px solid #4A9DEC;
  box-shadow: 0px 0px 0px 7px rgb(74, 157, 236, 20%);
  background-color: white;
}

`

const ItemsRender: React.FC<PropsType> = ({ list, total, onParentChange }: PropsType) => {
  const negative = useNavigate()

  const goDetail = (e: any) => {
    console.log(e, "参数")
    negative("/detail" + "?id=" + e.id, { replace: true, state: { query: e?.id } });
  }


  const onChange = (e: number | string) => {
    onParentChange(e)
  }

  const [names, setNames] = useState<any>("")
  const [phone, setPhone] = useState<any>("")
  const [concatName, setConcatName] = useState<any>("")
  const [goodsName, setgoodsName] = useState<any>("")

  const textChangeHandler = (event: ChangeEvent) => {
    setNames((event.target as HTMLInputElement).value);
  };

  const textChangeHandler1 = (event: ChangeEvent) => {
    setPhone((event.target as HTMLInputElement).value);
  };

  const textChangeHandler2 = (event: ChangeEvent) => {
    setConcatName((event.target as HTMLInputElement).value);
  };

  const textChangeHandler3 = (event: ChangeEvent) => {
    setgoodsName((event.target as HTMLInputElement).value);
  };


  const saveHandle = () => {
    if (!names) {
      return message.warning('请输入公司名称')

    }
    if (!phone) {
      return message.warning('请输入联系电话')
    }
    if (!goodsName) {
      return message.warning('请输入产品名称')
    }
    if (!concatName) {
      return message.warning('请输入联系人')
    }

    orgService.saveQuestion({
      "def1": names,
      "def2": goodsName,
      "def3": concatName,
      "descp": phone,
    }).then(res => {
      if (res) {
        message.info('提交成功')
      }
    })
  }





  return <div>
    <div className={styles['list-box-pen']}>
      <div className={styles['list-box']}>
        {
          list.length > 0 ? list.map((item: any, index: number) => {
            return <div key={index} className={styles['list-info']}>
              <div className={styles['product']}>
                <img className={`${styles.productimg} ${styles.producthover}`} src={item?.titleUrl.split(",")[0]}></img>
                <div className={`${styles.info} ${styles.box}`}>
                  <h2>{item.name}</h2>
                  <div className={`${styles.tag}`}>
                    {
                      item.label.split(",").map((items: any, index: number) => {
                        return <span key={index} className={`${styles['tag-box']}`}>{items}</span>
                      })
                    }
                  </div>
                  <div className={styles['info-desc']}>
                    <div>
                      适合团队: {item.team}
                    </div>
                    <div>
                      推荐季节: {item.times}
                    </div>
                    <div className={styles['desc-text']}>
                      推荐理由: {item.reason}
                    </div>
                    <div className={styles['menubtn']}>
                      <Button type="primary" shape="round" onClick={() => { goDetail(item) }}>查看更多</Button>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          }) : <div style={{ width: "860px" }}>
            <Empty></Empty>
          </div>
        }
        {list.length > 0 && <Pagination defaultCurrent={1} total={total} onChange={(e) => onChange(e)} />}
      </div>
      <div className={`${styles['form-menu']}`}>
        <div className={styles['title']}>
          <span className={styles['made-title1']}></span>
          <span className={styles['made-title2']}></span>
          免费定制方案
        </div>

        <Form name="control-ref">
          <Inputs>
            <input className="input" value={names}
              onChange={textChangeHandler} placeholder="公司名称" />
          </Inputs>
          <Inputs>
            <input className="input" value={goodsName}
              onChange={textChangeHandler3} placeholder="产品名称" />
          </Inputs>
          <Inputs>
            <input className="input" value={concatName}
              onChange={textChangeHandler2} placeholder="联系人" />
          </Inputs>
          <Inputs>
            <input className="input" value={phone}
              onChange={textChangeHandler1} placeholder="电话" />
          </Inputs>
          <Form.Item>
            <button onClick={saveHandle} className={`${styles['menu-btn']} ${styles['menu-btn1']}`}>
              <span>提交定制需求</span>
              <svg width="34" height="34" viewBox="0 0 74 74" fill="#fff" xmlns="http://www.w3.org/2000/svg">
                <circle cx="37" cy="37" r="35.5" stroke="black" stroke-width="0" ></circle>
                <path d="M25 35.5C24.1716 35.5 23.5 36.1716 23.5 37C23.5 37.8284 24.1716 38.5 25 38.5V35.5ZM49.0607 38.0607C49.6464 37.4749 49.6464 36.5251 49.0607 35.9393L39.5147 26.3934C38.9289 25.8076 37.9792 25.8076 37.3934 26.3934C36.8076 26.9792 36.8076 27.9289 37.3934 28.5147L45.8787 37L37.3934 45.4853C36.8076 46.0711 36.8076 47.0208 37.3934 47.6066C37.9792 48.1924 38.9289 48.1924 39.5147 47.6066L49.0607 38.0607ZM25 38.5L48 38.5V35.5L25 35.5V38.5Z" fill="#4096ff"></path>
              </svg>
            </button>
          </Form.Item>
        </Form>
      </div>
    </div>
  </div>
}

const Search: React.FC = () => {
  const [list, setList] = useState<any[]>([])
  const [isLoading, setLoading] = useState<boolean>(false)
  const [total, setTotal] = useState<number>(0)
  const { state } = useLocation();


  useEffect(() => {
    if (state.query) {
      setLoading(true)
      orgService.SearchList({ code: state?.query, page: 1, size: 10 }).then(res => {
        setLoading(false)
        if (res) {
          setList(res?.data)
          setTotal(res?.total)
        }
      }).catch(() => {
        setLoading(false)
      }).finally(() => {
        setLoading(false)
      })
    }

  }, [state.query])

  const onChange = (e: number) => {
    setLoading(true)
    orgService.SearchList({ code: state?.query, page: e, size: 10 }).then(res => {
      setLoading(false)
      if (res) {
        setList(res?.data)
        setTotal(res?.total)
      }
    }).finally(() => {
      setLoading(false)
    })
  }


  return (
    <>
      <div className=''>
        {
          isLoading ? <CircleLoading></CircleLoading> :
            <MotionContainer>
              <m.div variants={varFade().inRight}>
                <ItemsRender list={list} total={total} onParentChange={onChange}></ItemsRender>
              </m.div>
            </MotionContainer>
        }
      </div>
    </>

  );
}

export default Search;
